<template>
	<view class="container">
		<view class="box">
			<view class="space-between v-center b-item">
				<view class="left">头像</view>
				<button type="balanced" class="upload-btn" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
					<image :src="userInfo.avatar" mode="" class="img"></image>
				</button>
			</view>
			<view class="space-between v-center b-item">
				<view class="left">昵称</view>
				<view class="right v-center">
					<input type="text" confirm-type="done" placeholder="请输入内容" @confirm="onConfirm" :focus="focusInput"
						@blur="showInput = false" v-if="showInput" v-model="userInfo.name" />
					<view class="text" v-else @click="showInput = true, focusInput = true">{{ userInfo.name }}</view>
					<image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/jt-hui.png" class="jt"></image>
				</view>
			</view>
			<view class="space-between v-center b-item">
				<view class="left">手机</view>
				<view class="right v-center">
					<view class="text">{{ userInfo.mobile }}</view>
					<!-- <image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/jt-hui.png" class="jt"></image> -->
				</view>
			</view>
			<view class="space-between v-center b-item">
				<view class="left">所属门店</view>
				<view class="right v-center">
					<view class="text">{{ userInfo.shopName }}</view>
					<!-- <image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/jt-hui.png" class="jt"></image> -->
				</view>
			</view>
			<view class="space-between v-center b-item">
				<view class="left">门店职责</view>
				<view class="right v-center">
					<view class="text">{{ userInfo.jobId == 1 ? "投资人" : userInfo.jobId == 2 ? "店长" : "员工" }}</view>
					<!-- <image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/merchant/jt-hui.png" class="jt"></image> -->
				</view>
			</view>
			<view class="space-between v-center b-item">
				<view class="left">性别</view>
				<view class="right v-center">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="text">{{ userInfo.gender == 1 ? "女" : "男" }}</view>
					</picker>
					<image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/jt-hui.png" class="jt"></image>
				</view>
			</view>
			<view class="space-between v-center b-item">
				<view class="left">生日</view>
				<view class="right v-center">
					<picker mode="date" :value="userInfo.birthday" @change="bindDateChange">
						<view class="text">{{ userInfo.birthday }}</view>
					</picker>
					<image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/jt-hui.png" class="jt"></image>
				</view>
			</view>
		</view>
		<view class="center btn" @click="loginOut">退出登录</view>
	</view>
</template>

<script>
	import {
		getTime,
		transitionPhone
	} from "../../utils/plug"
	import {
		getUserInfo,
		editUser,
		uploadFile
	} from "../../api/active"
	export default {
		data() {
			return {
				array: ["男", "女"],
				userInfo: "",
				showInput: false,
				focusInput: false
			}
		},
		watch: {
			showInput(val) {
				if (!val) {
					this.focusInput = false
				}
			}
		},
		onLoad() {
			getUserInfo({
				userId: uni.getStorageSync("userId")
			}).then(res => {
				this.userInfo = res.data
				this.userInfo.mobile = transitionPhone(this.userInfo.mobile)
				this.userInfo.birthday = this.userInfo.birthday ?  getTime(this.userInfo.birthday, "userinfo") : '保密'
			})
		},
		methods: {
			bindDateChange(e) {
				this.userInfo.birthday = e.detail.value
				const date = new Date(e.detail.value).getTime()
				this.updateUser("birthday", date)
			},
			bindPickerChange(e) {
				this.userInfo.gender = e.detail.value
				this.updateUser("gender", e.detail.value)
			},
			onConfirm(event) {
				if (!event.detail.value)
					return uni.showToast({
						icon: "none",
						title: "请输入昵称！"
					})
				this.updateUser("name", event.detail.value)
			},
			onChooseavatar(e) {
				let self = this
				let {
					avatarUrl
				} = e.detail
				uni.showLoading({
					title: "加载中"
				})
				uploadFile({
					filename: "avatar" + new Date().getTime() + ".png"
				}).then(res => {
					const aliOss = res.data
					const aliOssUrl = aliOss.host
					delete aliOss.host
					const formData = []
					for (const key in aliOss) {
						if (aliOss.hasOwnProperty(key)) {
							formData.push({
								name: key,
								value: aliOss[key]
							})
						}
					}
					// console.log(Object.fromEntries(formData.map(item => [item.name, item.value])))
					uni.uploadFile({
						url: aliOssUrl,
						filePath: avatarUrl, // Use the file's path in Uni-app
						name: "file",
						formData: Object.fromEntries(formData.map(item => [item.name, item.value])),
						success: uploadFileRes => {
							self.userInfo.avatar = aliOssUrl + "/" + aliOss.key
							self.updateUser("avatar", self.userInfo.avatar)
							uni.hideLoading()
						},
						fail: err => {
							console.log(err)
							uni.hideLoading()
						}
					})
				})
			},
			updateUser(key, value) {
				const data = {}
				data[key] = value
				editUser({
					id: uni.getStorageSync("userId"),
					...data
				}).then(() => {
					uni.showToast({
						icon: "none",
						title: "修改成功！"
					})
				})
			},
			loginOut() {
				uni.showModal({
					title: "提示",
					content: "是否退出登录?",
					success: res => {
						if (res.confirm) {
							uni.clearStorageSync()
							uni.reLaunch({
								url: "/pages/login/login"
							})
						} else if (res.cancel) {
							console.log("用户点击取消")
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.upload-btn {
		background: transparent;
		margin: 0;
		padding: 0;
		border: 0px solid transparent;
		border-radius: 0;
		line-height: 0;
		background-color: transparent;

		&::after {
			border: none;
		}
	}

	.container {
		width: 100vw;
		height: 100vh;
	}

	.box {
		padding: 0 25rpx;
	}

	.b-item {
		height: 100rpx;
		width: 100%;
		border-bottom: 2rpx solid #e9e9e9;
	}

	.b-item:last-child {
		border: none;
	}

	.left {
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
	}

	.text {
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
		margin-right: 15rpx;
	}

	.img {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
	}

	.jt {
		width: 13rpx;
		height: 23rpx;
	}

	.btn {
		position: fixed;
		bottom: 20rpx;
		left: 30rpx;
		width: 690rpx;
		height: 90rpx;
		background: #005097;
		font-weight: 800;
		font-size: 30rpx;
		color: #ffffff;
		border-radius: 45rpx;
	}
</style>